<template>
  <div class="persson">
    <!--    <div>{{ sum }}</div>-->
    <!--    <button type="button" @click="sum++">加一</button>-->
    <div>{{ temp }}℃</div>
    <div>{{ height }}</div>
    <button type="button" @click="addTemp">+10</button>
    <button type="button" @click="height += 10">+10</button>
  </div>
</template>

<script lang="ts">
  export default {
    name: "MyTest2",
  }
</script>
<script setup lang="ts">
import {ref, watch, watchEffect} from 'vue'

  const temp = ref<number>(0);
  const height = ref<number>(0);
  watch([temp, height], (value) => {
    let [newTemp, newHeight] = value;
    if (newTemp >= 60 || newHeight >= 80) {
      console.log('提示');
    }
  });

  function addTemp() : void {
    temp.value += 10;
  }

  watchEffect(() => {
    if (temp.value >= 60 || height.value >= 80) {
      console.log('提示');
    }
  });

  // 配合父标签上的ref使用, 暴露子组件上的组件实例
  defineExpose({
    temp,
    height
  })


</script>

<style scoped>
.persson {
  background-color: skyblue;
  padding: 16px;
}
</style>